.control-wrapper {position: relative;width: 50vw;height: 50vw;max-width: 300px;max-height: 300px;margin: 0 auto;border-radius: 100%;}

.control-btn {display: flex;justify-content: center;position: absolute; width: 44%; height: 44%; border-radius: 5px; border: 1px solid #78aee4; box-sizing: border-box;  transition: all .3s linear;  }

.control-btn i {font-size: 20px; color: #78aee4;  display: flex; justify-content: center; align-items: center;}

.control-round {position: absolute; top: 21%; left: 21%; width: 58%; height: 58%; background: #fff; border-radius: 100%;cursor:pointer;}

.control-round-inner {  position: absolute;  left: 15%;  top: 15%;  display: flex; justify-content: center; align-items: center;  width: 70%; height: 70%; font-size: 40px; color: #78aee4; border: 1px solid #78aee4; border-radius: 100%;  transition: all .3s linear; }

.control-inner-btn {position: absolute; width: 60%; height: 60%; background: #fafafa;}

.control-top {top: -6%; left: 28%; transform: rotate(-45deg); border-radius: 5px 100% 5px 0;cursor:pointer;}

.control-top .control-inner {left: -1px;  bottom: 0;  border-top: 1px solid #78aee4;  border-right: 1px solid #78aee4;  border-radius: 0 100% 0 0;  }

.control-top .fa {transform: rotate(45deg) translateY(-7px); }

.control-left {top: 28.5%;  left: -6%;  transform: rotate(45deg);  border-radius: 5px 0 5px 100%;cursor:pointer;}

.control-left .control-inner {right: -1px;  top: -1px;  border-bottom: 1px solid #78aee4;  border-left: 1px solid #78aee4;  border-radius: 0 0 0 100%;}

.control-left .fa {transform: rotate(-45deg) translateX(-7px);}

.control-right {top: 28.5%;  right: -6%;  transform: rotate(45deg);  border-radius: 5px 100% 5px 0;cursor:pointer; }

.control-right .control-inner {left: -1px;  bottom: -1px;  border-top: 1px solid #78aee4;  border-right: 1px solid #78aee4;  border-radius: 0 100% 0 0 ;}

.control-right .fa {transform: rotate(-45deg) translateX(7px);}

.control-bottom {left: 28%;  bottom: -6%;  transform: rotate(45deg);  border-radius: 0 5px 100% 5px; cursor:pointer; }

.control-bottom .control-inner {top: -1px;  left: -1px;  border-bottom: 1px solid #78aee4;  border-right: 1px solid #78aee4;  border-radius: 0 0 100% 0 ;}

.control-bottom .fa {  transform: rotate(-45deg) translateY(7px);  }